<template>
  <div class="background">
  </div>
  <div class="body">
    <div class="card">
      <div class="title">管理员登录</div>
      <div class="tabs">
        <a-tabs v-model:activeKey="activeKey" centered>
          <a-tab-pane :key="1" tab="邮箱验证码登录">
            <a-form
                style="margin-top: 20px"
                :model="emailState"
                name="basic"
                @finish="onFinish"
                layout="horizontal"
                autocomplete="off"
            >
              <a-form-item
                  name="email"
                  :rules="[{ required: true, message: '请输入邮箱' }]"
              >
                <a-input v-model:value="emailState.email" size="large" placeholder="请输入邮箱"/>
              </a-form-item>
              <a-form-item
                  name="code"
                  :rules="[
                      { required: true, message: '请输入验证码' },
                      { len: 6, message: '验证码长度为6位' }
                  ]"
              >
                <a-row :gutter="[10,24]">
                  <a-col :span="14">
                    <a-input v-model:value="emailState.code" size="large" placeholder="请输入验证码"/>
                  </a-col>
                  <a-col :span="10">
                    <a-button
                        size="large"
                        type="primary"
                        style="width: 100%;"
                        @click="sendEmailCode"
                        :loading="buttonLoading"
                    >{{ buttonLoading ? `${loadingTime}秒后获取` : '获取验证码' }}
                    </a-button>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item>
                <a-button
                    size="large"
                    type="primary"
                    style="width: 100%;margin-top: 20px"
                    html-type="submit"
                >立即登录
                </a-button>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane :key="0" tab="账号密码登录" force-render>
            <a-form
                style="margin-top: 20px"
                :model="formState"
                name="basic"
                layout="horizontal"
                autocomplete="off"
                @finish="onFinish"
            >
              <a-form-item
                  name="username"
                  :rules="[{ required: true, message: '请输入用户名' }]"
              >
                <a-input v-model:value="formState.username" size="large" placeholder="请输入用户名"/>
              </a-form-item>
              <a-form-item
                  name="password"
                  :rules="[{ required: true, message: '请输入密码' }]"
              >
                <a-input-password v-model:value="formState.password" size="large" placeholder="请输入密码"/>
              </a-form-item>
              <a-form-item>
                <a-button
                    size="large"
                    type="primary"
                    style="width: 100%;margin-top: 20px"
                    html-type="submit"
                >立即登录
                </a-button>
              </a-form-item>
            </a-form>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {reactive} from 'vue';
import router from "../router/index.js";
import request from "../axios/axios.js";
import {message} from "ant-design-vue";

const activeKey = ref(1);

interface FormState {
  username: string;
  password: string;
}

interface EmailState {
  email: string;
  code: string;
}

const formState = reactive<FormState>({
  username: '',
  password: '',
});
//邮箱验证码登录
const emailState = reactive<EmailState>({
  email: '',
  code: '',
});
const buttonLoading = ref(false)
const loadingTime = ref(60)

const loading = () => {
  loadingTime.value = 60
  const clean = setInterval(() => {
    loadingTime.value = loadingTime.value - 1;
    if (loadingTime.value <= 0) {
      buttonLoading.value = false
      clearInterval(clean);
    }
  }, 1000);
}
const uuid = ref('');
const sendEmailCode = () => {
  if (emailState.email === '') {
    message.error('请输入邮箱')
    return;
  }
  buttonLoading.value = true;
  loading();
  request.get('/api/user/captcha', {
    params: {
      email: emailState.email
    }
  }).then(res => {
    uuid.value = res.data.data.uuid
    console.log(res.data.data.uuid)
  })
}
//登录
const onFinish = () => {
  if (activeKey.value === 1) {
    if (emailState.email === '') {
      message.error('请输入邮箱')
      return;
    }
    if (emailState.code === '') {
      message.error('请输入验证码')
      return;
    }
    request.post('/api/user/login', {
      email: emailState.email,
      captcha: emailState.code,
      loginType: activeKey.value,
      emailCodeId: uuid.value
    }).then(res => {
      window.localStorage.setItem('token', res.data.data)
      // console.log(res)
      message.success('登录成功')
      router.push('/admin')
    })
  }else {
    console.log(activeKey.value)
    if (formState.username === '') {
      message.error('请输入用户名')
      return;
    }
    if (formState.password === '') {
      message.error('请输入密码')
      return;
    }
    request.post('/api/user/login', {
      userAccount: formState.username,
      userPassword: formState.password,
      loginType: activeKey.value
    }).then(res => {
      window.localStorage.setItem('token', res.data.data)
      // console.log(res.data.data)
      message.success('登录成功')
      router.push('/admin')
    })
  }
}


</script>


<style scoped>
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  z-index: -10;
  zoom: 1;
  background-color: #fff;
  background-image: url(../assets/IMG_20230611_1914160.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

.body {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  background-color: rgb(255, 255, 255, 0.7);
  height: 400px;
  width: 350px;
  border-radius: 10px;
  padding: 20px;
}

.title {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin: 20px 0;
}
</style>
